<template>
  <PagePanel header="雷达图示例">
    <VisualDarkChart
      class="h-full"
      :loading="chartState.loading"
      :no-data="chartState.noData"
      :options="chartState.options"
    />
  </PagePanel>
</template>

<script lang="ts" setup>
import { PagePanel, VisualDarkChart } from '../components/index'

const chartState = reactive({
  loading: true,
  noData: false,
  options: {
    legend: {
      show: false,
    },
    radar: {
      indicator: [
        { name: 'Sales' },
        { name: 'Administration' },
        { name: 'Information Technology' },
        { name: 'Customer Support' },
        { name: 'Development' },
        { name: 'Marketing' },
      ],
    },
    series: [
      {
        name: 'Budget vs spending',
        type: 'radar',
        data: [
          {
            value: [4200, 3000, 20000, 35000, 50000, 18000],
            name: 'Allocated Budget',
          },
          {
            value: [5000, 14000, 28000, 26000, 42000, 21000],
            name: 'Actual Spending',
          },
        ],
      },
    ],
  },
})

setTimeout(() => {
  chartState.loading = false
  chartState.noData = false
}, 2000)
</script>
